<script>
import render from "../formGenerator/render/render.js";
import { deepClone } from "@/util/formGenerator/index";
import { formConf, inputComponents } from "./config.js";
function renderFrom(h) {
  const { formConfCopy, formList } = this;
  console.log(1111);
  console.log(formList);
  return (
    <el-row gutter={formConfCopy.gutter} class="bgfff">
      <el-form
        inline="true"
        size={formConfCopy.size}
        label-position={formConfCopy.labelPosition}
        disabled={formConfCopy.disabled}
        label-width={`${formConfCopy.labelWidth}px`}
        ref={formConfCopy.formRef}
        // model不能直接赋值 https://github.com/vuejs/jsx/issues/49#issuecomment-472013664
        props={{ model: this[formConfCopy.formModel] }}
        class="d-flex f-wrap"
      >
        {renderFormItem.call(this, h, inputComponents, formList)}
        {formConfCopy.formBtns && formBtns.call(this, h)}
      </el-form>
    </el-row>
  );
}

function formBtns(h) {
  return (
    <el-col span="4">
      <el-form-item size="large">
        <el-button type="primary" onClick={this.submitForm}>
          查询
        </el-button>
        <el-button onClick={this.resetForm}>重置</el-button>
      </el-form-item>
    </el-col>
  );
}

function renderFormItem(h, elementList, formList) {
  return formList.map((item) => {
    return elementList.map((scheme) => {
      const config = scheme.__config__;
      const listeners = buildListeners.call(this, item);

      let labelWidth = config.labelWidth ? `${config.labelWidth}px` : null;
      if (config.showLabel === false) labelWidth = "0";
      if (config.tag == item.tag) {
        item = Object.assign(item, scheme);
        if (scheme) {
          return (
            <el-col span={config.span}>
              <el-form-item
                label-width={labelWidth}
                prop={item.__vModel__}
                label={config.showLabel ? config.label : ""}
              >
                <render conf={item} on={listeners} />
              </el-form-item>
            </el-col>
          );
        }
        throw new Error(`出现异常！`);
      }
    });
  });
}

function buildListeners(scheme) {
  const config = scheme && scheme.__config__;
  // const methods = this.formConf.__methods__ || {};
  const listeners = {};

  // 给__methods__中的方法绑定this和event
  // Object.keys(methods).forEach((key) => {
  //   listeners[key] = (event) => methods[key].call(this, event);
  // });
  // 响应 render.js 中的 vModel $emit('input', val)
  listeners.input = (event) => setValue.call(this, event, config, scheme);

  return listeners;
}

function setValue(event, config, scheme) {
  const { formConfCopy } = this;
  console.log(121);
  console.log("event");
  console.log(event);
  console.log("config");
  console.log(config);
  console.log("scheme");
  console.log(scheme);

  this.$set(scheme.__config__, "defaultValue", event);
  this.$set(this[formConfCopy.formModel], scheme.__vModel__, event);
}

export default {
  name: "BaseForm",
  components: { render },
  props: {
    formList: {
      type: Array,
      required: true,
      default: () => [],
    },
  },
  data() {
    const data = {
      formConfCopy: deepClone(formConf),
      [formConf.formModel]: {},
    };
    // this.initFormData(inputComponents, this.formList);
    return data;
  },
  methods: {
    initFormData(componentList, formData) {
      console.log(componentList);
      console.log(formData);
      componentList.forEach((cur) => {
        // const config = cur.__config__;
        // if (cur.__vModel__) formData[cur.__vModel__] = config.defaultValue;
        // if (config.children) this.initFormData(config.children, formData);
      });
    },
    // 查询
    submitForm() {},
    // 重置
    resetForm() {},
  },
  render(h) {
    return renderFrom.call(this, h);
  },
};
</script>

<style scoped lang="less">
.bgfff {
  background: #fff;
}
.d-flex {
  display: -webkit-box !important;
  display: -webkit-flex !important;
  display: -ms-flexbox !important;
  display: -moz-box !important;
  display: flex !important;
}

.f-wrap {
  flex-wrap: wrap;
}
</style>
